Docked Composer

Docked Composer is a persistent utility bar that allows a user to continually use the app to complete tasks or gather information while expanding/collapsing a composer window.

BaseBase › OpenBase › ClosedBase › PopoutBase › Composers with Overflow MenuBasedev ready

Preview

Code

<div class="slds-docked_container">
  <div role="dialog" aria-labelledby="dialog-heading-id" class="slds-docked-composer slds-grid slds-grid--vertical slds-nowrap slds-is-open">
    <header class="slds-docked-composer__header slds-grid slds-grid--align-spread slds-shrink-none">
      <div class="slds-media slds-media--center">
        <div class="slds-media__figure">
          <span class="slds-icon_container slds-icon-standard-call">
            <svg aria-hidden="true" class="slds-icon slds-icon--small">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#call"></use>
            </svg>
            <span class="slds-assistive-text">Call Icon</span>
          </span>
        </div>
        <div class="slds-media__body">
          <h2 id="dialog-heading-id">Header</h2>
        </div>
      </div>
      <div class="slds-docked-composer__actions">
        <button class="slds-button slds-button--icon-bare slds-button--icon-inverse">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
          </svg>
          <span class="slds-assistive-text">Minimize window</span>
        </button>
        <button class="slds-button slds-button--icon-bare slds-button--icon-inverse">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
          </svg>
          <span class="slds-assistive-text">Expand Composer</span>
        </button>
        <button class="slds-button slds-button--icon-bare slds-button--icon-inverse">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Close</span>
        </button>
      </div>
    </header>
    <div class="slds-docked-composer__body slds-col slds-grid slds-grid--vertical slds-nowrap slds-size--1-of-1"></div>
    <footer class="slds-docked-composer__footer slds-shrink-none">
      <div class="slds-float--right slds-grid slds-grid--align-end slds-size--1-of-2 slds-text-align--right">
        <button class="slds-button slds-button--brand">Action</button>
      </div>
    </footer>
  </div>
</div>

VoiceVoice › QueuedVoice › RingingVoice › ConnectedVoice › CancelledVoice › BusyVoice › FailedVoice › No AnswerVoice › FinishedVoice › Incoming CallVoice › Log a CallVoicedev readyNot Compatible with S1 Mobile

Preview

Code

<div role="dialog" aria-labelledby="dialog-heading-id" class="slds-docked-composer slds-grid slds-grid--vertical slds-nowrap slds-is-open">
  <header class="slds-docked-composer__header slds-grid slds-grid--align-spread slds-shrink-none">
    <div class="slds-media slds-media--center">
      <div class="slds-media__figure">
        <span class="slds-icon_container slds-icon-standard-call">
          <svg aria-hidden="true" class="slds-icon slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#call"></use>
          </svg>
          <span class="slds-assistive-text">Call Icon</span>
        </span>
      </div>
      <div class="slds-media__body">
        <h2 id="dialog-heading-id" aria-live="polite" aria-atomic="true">Lei Chan - Connecting...</h2>
      </div>
    </div>
    <div class="slds-docked-composer__actions">
      <button class="slds-button slds-button--icon-bare slds-button--icon-inverse">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
        </svg>
        <span class="slds-assistive-text">Minimize window</span>
      </button>
      <button class="slds-button slds-button--icon-bare slds-button--icon-inverse">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
        </svg>
        <span class="slds-assistive-text">Expand Composer</span>
      </button>
      <button class="slds-button slds-button--icon-bare slds-button--icon-inverse">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
    </div>
  </header>
  <div class="slds-docked-composer__body slds-col slds-grid slds-grid--vertical slds-nowrap slds-grid--align-center">
    <div class="slds-text-align--center slds-scrollable--y">
      <span class="slds-avatar slds-avatar--large">
        <img src="/assets/images/avatar2.jpg" alt="Lei Chan" />
      </span>
      <h3 class="slds-text-heading--large">Lei Chan</h3>
      <ul class="slds-list--horizontal slds-grid--align-center slds-has-dividers--right slds-text-body--small">
        <li class="slds-item">VP of Sales</li>
        <li class="slds-item ">Acme Corporation</li>
      </ul>
      <p class="slds-text-heading--medium slds-m-top--medium">Connecting...</p>
    </div>
  </div>
  <footer class="slds-docked-composer__footer slds-shrink-none">
    <button class="slds-button slds-button--destructive slds-size--1-of-1">End Call</button>
  </footer>
</div>

EmailEmailprototype

Preview

Code

<div role="dialog" aria-labelledby="dialog-heading-id" class="slds-docked-composer slds-grid slds-grid--vertical slds-nowrap slds-is-open">
  <header class="slds-docked-composer__header slds-grid slds-grid--align-spread slds-shrink-none">
    <div class="slds-media slds-media--center">
      <div class="slds-media__figure">
        <span class="slds-icon_container slds-icon-standard-email">
          <svg aria-hidden="true" class="slds-icon slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#email"></use>
          </svg>
          <span class="slds-assistive-text">Email Icon</span>
        </span>
      </div>
      <div class="slds-media__body">
        <h2 id="dialogheading-id">New Email</h2>
      </div>
    </div>
    <div class="slds-docked-composer__actions">
      <button class="slds-button slds-button--icon-bare slds-button--icon-inverse">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
        </svg>
        <span class="slds-assistive-text">Minimize window</span>
      </button>
      <button class="slds-button slds-button--icon-bare slds-button--icon-inverse">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
        </svg>
        <span class="slds-assistive-text">Expand Composer</span>
      </button>
      <button class="slds-button slds-button--icon-bare slds-button--icon-inverse">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
    </div>
  </header>
  <div class="slds-docked-composer__body slds-docked-composer__body--email slds-col slds-grid slds-grid--vertical slds-nowrap">
    <div class="slds-grid slds-grid--align-spread">
      <div class="slds-grid slds-grow slds-p-horizontal--small">
        <label class="slds-email-composer__label slds-align-middle" for="emailComposerTo">To</label>
        <input class="slds-input--bare slds-input--height slds-hide" id="emailComposerTo" type="text" />
        <div class="slds-pill_container--bare slds-show">
          <span class="slds-pill">
            <span class="slds-icon_container slds-icon-standard-account slds-pill__icon_container">
              <svg aria-hidden="true" class="slds-icon">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
              </svg>
              <span class="slds-assistive-text">Account</span>
            </span><a href="javascript:void(0);" class="slds-pill__label" title="Lei Chan">Lei Chan</a>
            <button class="slds-button slds-button--icon slds-pill__remove">
              <svg aria-hidden="true" class="slds-button__icon">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
              </svg>
              <span class="slds-assistive-text">Remove</span>
            </button>
          </span>
        </div>
      </div>
      <div class="slds-grid slds-shrink-none slds-p-horizontal--small">
        <button class="slds-button">Cc</button>
        <button class="slds-button">Bcc</button>
      </div>
    </div>
    <div class="slds-grid slds-p-horizontal--small">
      <label class="slds-email-composer__label slds-align-middle" for="emailComposerCc">Cc</label>
      <input class="slds-input--bare slds-input--height" id="emailComposerCc" type="text" />
      <div class="slds-pill_container--bare slds-hide"></div>
    </div>
    <div class="slds-grid slds-p-horizontal--small slds-hide">
      <label class="slds-email-composer__label slds-align-middle" for="emailComposerBcc">Bcc</label>
      <input class="slds-input--bare slds-input--height" id="emailComposerBcc" type="text" />
      <div class="slds-pill_container--bare slds-hide"></div>
    </div>
    <label class="slds-assistive-text" for="subject-1">Enter subject</label>
    <input id="subject-1" class="slds-input" placeholder="Enter Subject" />
    <div class="slds-docked-composer__toolbar slds-shrink-none slds-grid slds-grid--align-spread">
      <div class="slds-grid">
        <div class="slds-button-group slds-picklist slds-picklist--fluid slds-shrink-none">
          <button class="slds-button slds-button--neutral slds-picklist__label picklist__label--small">Font
            <svg aria-hidden="true" class="slds-icon slds-icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
          </button>
        </div>
        <div class="slds-button-group slds-picklist slds-picklist--fluid slds-shrink-none">
          <button class="slds-button slds-button--neutral slds-picklist__label picklist__label--small">14
            <svg aria-hidden="true" class="slds-icon slds-icon--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
            </svg>
          </button>
        </div>
        <div class="slds-button-group" role="group">
          <button class="slds-button slds-button--icon-border-filled">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#bold"></use>
            </svg>
            <span class="slds-assistive-text">Bold</span>
          </button>
          <button class="slds-button slds-button--icon-border-filled">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#italic"></use>
            </svg>
            <span class="slds-assistive-text">Italic</span>
          </button>
          <button class="slds-button slds-button--icon-border-filled">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#underline"></use>
            </svg>
            <span class="slds-assistive-text">Underline</span>
          </button>
        </div>
        <div class="slds-button-group" role="group">
          <button class="slds-button slds-button--icon-border-filled">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextnumberedlist"></use>
            </svg>
            <span class="slds-assistive-text">Numbered List</span>
          </button>
          <button class="slds-button slds-button--icon-border-filled">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#richtextbulletedlist"></use>
            </svg>
            <span class="slds-assistive-text">Bulleted List</span>
          </button>
          <button class="slds-button slds-button--icon-border-filled">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#left_align_text"></use>
            </svg>
            <span class="slds-assistive-text">Left Align Text</span>
          </button>
          <button class="slds-button slds-button--icon-border-filled">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#center_align_text"></use>
            </svg>
            <span class="slds-assistive-text">Center Align Text</span>
          </button>
          <button class="slds-button slds-button--icon-border-filled">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#right_align_text"></use>
            </svg>
            <span class="slds-assistive-text">Right Align Text</span>
          </button>
          <button class="slds-button slds-button--icon-border-filled">
            <svg aria-hidden="true" class="slds-button__icon">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#link"></use>
            </svg>
            <span class="slds-assistive-text">Link</span>
          </button>
        </div>
      </div>
    </div>
    <label class="slds-assistive-text" for="composer-text-input-1">Compose email</label>
    <textarea id="composer-text-input-1" class="slds-docked-composer__input slds-input--bare slds-text-longform slds-grow" placeholder="Compose email..."></textarea>
  </div>
  <footer class="slds-docked-composer__footer slds-shrink-none">
    <div class="slds-float--right slds-grid slds-grid--align-end slds-size--1-of-2 slds-text-align--right">
      <button class="slds-button slds-button--icon-container">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#link"></use>
        </svg>
        <span class="slds-assistive-text">Attach File</span>
      </button>
      <button class="slds-button slds-button--icon-container">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#insert_template"></use>
        </svg>
        <span class="slds-assistive-text">Insert Template</span>
      </button>
      <button class="slds-button slds-button--icon-container">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#insert_tag_field"></use>
        </svg>
        <span class="slds-assistive-text">Insert HTML</span>
      </button>
      <button class="slds-button slds-button--icon-container">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#preview"></use>
        </svg>
        <span class="slds-assistive-text">Preview</span>
      </button>
      <button class="slds-button slds-button--icon-container">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#delete"></use>
        </svg>
        <span class="slds-assistive-text">Delete</span>
      </button>
      <button class="slds-button slds-button--brand">Send</button>
    </div>
  </footer>
</div>

TaskTaskdev ready

Preview

Code

<div role="dialog" aria-labelledby="dialog-heading-id" class="slds-docked-composer slds-grid slds-grid--vertical slds-nowrap slds-is-open">
  <header class="slds-docked-composer__header slds-grid slds-grid--align-spread slds-shrink-none">
    <div class="slds-media slds-media--center">
      <div class="slds-media__figure">
        <span class="slds-icon_container slds-icon-standard-task">
          <svg aria-hidden="true" class="slds-icon slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#task"></use>
          </svg>
          <span class="slds-assistive-text">Task Icon</span>
        </span>
      </div>
      <div class="slds-media__body">
        <h2 id="dialog-heading-id">New Task</h2>
      </div>
    </div>
    <div class="slds-docked-composer__actions">
      <button class="slds-button slds-button--icon-bare slds-button--icon-inverse">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
        </svg>
        <span class="slds-assistive-text">Minimize window</span>
      </button>
      <button class="slds-button slds-button--icon-bare slds-button--icon-inverse">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
        </svg>
        <span class="slds-assistive-text">Expand Composer</span>
      </button>
      <button class="slds-button slds-button--icon-bare slds-button--icon-inverse">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
    </div>
  </header>
  <div class="slds-docked-composer__body slds-docked-composer__body--form slds-col slds-grid slds-grid--vertical slds-nowrap">
    <fieldset class="slds-form--compound">
      <legend class="slds-assistive-text">Log new task</legend>
      <div class="form-element__group">
        <div class="slds-form-element__row">
          <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-01">Subject</label>
            <div class="slds-form-element__control">
              <input class="slds-input" type="text" id="text-input-01" />
            </div>
          </div>
        </div>
        <div class="slds-form-element__row">
          <div class="slds-form-element slds-size--1-of-2">
            <label class="slds-form-element__label" for="text-input-02">Assigned To</label>
            <div class="slds-form-element__control">
              <input class="slds-input" type="text" id="text-input-02" />
            </div>
          </div>
          <div class="slds-form-element slds-size--1-of-2">
            <label class="slds-form-element__label" for="text-input-03">Due Dates</label>
            <div class="slds-form-element__control">
              <input class="slds-input" type="text" id="text-input-03" />
            </div>
          </div>
        </div>
        <div class="slds-form-element__row">
          <div class="slds-form-element slds-lookup slds-size--1-of-2" data-select="multi" data-scope="multi">
            <label class="slds-form-element__label" for="lookup-01">Name</label>
            <div class="slds-form-element__control lookup__search-control slds-grid slds-box--border">
              <div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-align-middle slds-m-left--x-small slds-shrink-none">
                <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                </svg>
                <button class="slds-button slds-button--icon-bare slds-button-space-left slds-shrink-none">
                  <svg aria-hidden="true" class="slds-button__icon">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                  </svg>
                  <span class="slds-assistive-text">Filter</span>
                </button>
              </div>
              <div class="slds-grid slds-grow">
                <input id="lookup-01" class="slds-lookup__search-input slds-input--bare slds-grow" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" placeholder="Search Leads" />
              </div>
            </div>
          </div>
          <div class="slds-form-element slds-lookup slds-size--1-of-2" data-select="multi" data-scope="multi">
            <label class="slds-form-element__label" for="lookup-02">Related To</label>
            <div class="slds-form-element__control lookup__search-control slds-grid slds-box--border">
              <div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-align-middle slds-m-left--x-small slds-shrink-none">
                <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                </svg>
                <button class="slds-button slds-button--icon-bare slds-button-space-left slds-shrink-none">
                  <svg aria-hidden="true" class="slds-button__icon">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                  </svg>
                  <span class="slds-assistive-text">Filter</span>
                </button>
              </div>
              <div class="slds-grid slds-grow">
                <input id="lookup-02" class="slds-lookup__search-input slds-input--bare slds-grow" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" placeholder="Search Accounts" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
  <footer class="slds-docked-composer__footer slds-shrink-none">
    <div class="slds-float--right slds-grid slds-grid--align-end slds-size--1-of-2 slds-text-align--right">
      <button class="slds-button slds-button--brand">Save</button>
    </div>
  </footer>
</div>

Component Overview

The docked composer relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes.

The overflow menu for docked composer, .slds-docked-composer--overflow, displays when the number of docked composers exceeds the width of the viewport. The overflow pill displays with a number indicator for all hidden docked composers. A user can invoke a popover with all available docked composers and replace the furthest left docked composer with the one being selected.

When a user clicks on the "pop out" icon in the .slds-docked-composer__header, a modal displays and contains the task that was currently in the docked composer.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-docked_container
Applied to:

<div>

Outcome:

Container that is fixed to the bottom of the viewport, can contain multiple docked composers

Required:

Required

Comments:

--

.slds-docked-composer
Applied to:

<div>

Outcome:

Intializes docked composer containter window

Required:

Required

Comments:

Each docked composer window receives this class, by default the docked composer is collapsed, adding .slds-is-open expands the composer

.slds-docked-composer__header
Applied to:

<div>

Outcome:

Bar at the top of the composer that contains actionable items to invoke, such as minimizing, popping out the composer and removing the composer.

Required:

Required

Comments:

Has additional utility classes to handle layout such as .slds-grid, .slds-grid--align-spread and .slds-shrink-none

.slds-docked-composer__actions
Applied to:

<div>

Outcome:

Actionable items with .slds-docked-composer__header

Required:

Required

Comments:

--

.slds-docked-composer__body
Applied to:

<div>

Outcome:

Primary area within docked composer that contains specific task

Required:

Required

Comments:

Has additional utility classes to handle layout such as .slds-col, .slds-grid, .slds-grid--vertical, .slds-nowrap and .slds-size--1-of-1

.slds-docked-composer__footer
Applied to:

Outcome:

Bar at the bottom of the composer that contains actionable items to invoke, such as saving, associating relationships and adding content.

Required:

Required

Comments:

Has additional utility classes to handle layout such as .slds-shrink-none

.slds-docked-composer__lead
Applied to:

<div>

Outcome:

Within the docked composer body, the lead is the first region

Required:

No, optional element or modifier

Comments:

--

.slds-docked-composer__toolbar
Applied to:

<div>

Outcome:

The toolbar contains actionable items to invoke, usually rich text editor controls

Required:

No, optional element or modifier

Comments:

--

.slds-docked-composer__input
Applied to:

<textarea>

Outcome:

The text input field of the docked composer

Required:

No, optional element or modifier

Comments:

--

.slds-docked-composer--overflow
Applied to:

<div>

Outcome:

When the number of docked composer exceed the width of the viewport, this class modifies the docked composer styles

Required:

Required

Comments:

--

.docked-composer__overflow-pill
Applied to:

<a>

Outcome:

An indicator that displays the number of docked composers not shown on screen, user can select to display another docked composer from this pill

Required:

Required

Comments:

--